import React, { memo } from 'react'
import { Descriptions } from 'antd'
import { shallowEqual, useSelector } from 'react-redux'
import { UserDescWrapper } from './style'
import moment from 'moment'
import { TagOutlined } from '@ant-design/icons'

export default memo(function B_UserDesc() {
  const { userProfile = {} } = useSelector(
    (state) => ({
      userProfile: state.blogReducer.getIn(['userProfile'])
    }),
    shallowEqual
  )

  const { baseProfile = {} } = userProfile
  return (
    <UserDescWrapper>
      {userProfile && baseProfile && (
        <Descriptions
          className="fs-5 text-bolder mt-7 table-title"
          title={
            <span>
              <TagOutlined className="base-color pr-2" />
              基础信息
            </span>
          }
        >
          <Descriptions.Item label="姓名">
            {baseProfile.name || ''}
          </Descriptions.Item>
          <Descriptions.Item label="性别">
            {baseProfile.gender === 1 ? '男' : '女'}
          </Descriptions.Item>
          <Descriptions.Item label="生日">
            {(baseProfile.birth &&
              moment(baseProfile.birth).format('YYYY/MM/DD')) ||
              ''}
          </Descriptions.Item>
          <Descriptions.Item label="电话">
            {baseProfile.phone || ''}
          </Descriptions.Item>
          <Descriptions.Item label="微信">
            {baseProfile.wx || ''}
          </Descriptions.Item>
          <Descriptions.Item label="QQ">
            {baseProfile.qq || ''}
          </Descriptions.Item>
          <Descriptions.Item label="邮箱">
            {baseProfile.email || ''}
          </Descriptions.Item>
          <Descriptions.Item label="情感">
            {baseProfile.emotion || ''}
          </Descriptions.Item>
          <Descriptions.Item label="地址">
            {baseProfile.address || ''}
          </Descriptions.Item>
          <Descriptions.Item label="个人站点">
            {baseProfile.website || ''}
          </Descriptions.Item>
          <Descriptions.Item label="一句话">
            {baseProfile.suggest || ''}
          </Descriptions.Item>
        </Descriptions>
      )}
    </UserDescWrapper>
  )
})
